import React, { CSSProperties } from 'react';
import { ApiType, EditorConstructionOptions } from '@/components/MonacoEditor/index';
import { Select, SelectProps } from 'antd';
import * as monaco from 'monaco-editor';

export interface ToolBarProps {
  editor?: ApiType;
  options?: EditorConstructionOptions;
  style?: CSSProperties;
  className?: string;
  render?: (editor?: ApiType) => React.ReactNode;
}

export const ToolBar: React.FC<ToolBarProps> = (props) => {
  const { editor, options, style, className, render } = props;

  const languages: SelectProps['options'] = monaco.languages
    .getLanguages()
    .map((i) => ({
      label: i?.id,
      value: i?.id,
    }));

  const setLanguage: SelectProps['onSelect'] = (val) => {
    // @ts-ignore
    monaco.editor.setModelLanguage(editor?.getModel(), val);
  };

  const themes: SelectProps['options'] = [
    { label: 'Visual Studio', value: 'vs' },
    { label: 'Visual Studio Dark', value: 'vs-dark' },
    { label: 'High Contrast Dark', value: 'hc-black' },
  ];

  const setTheme: SelectProps['onSelect'] = (val) =>
    editor?.updateOptions({ theme: val });

  return (
    <div id="roolbar">
      { typeof render === 'function' ? (
        render(editor)
      ) : (
        <div
          style={ { display: 'flex', gap: 8, ... style } }
          className={ className }
        >
          <Select
            placeholder="请选择语言"
            style={ { width: '100%' } }
            options={ languages }
            onSelect={ setLanguage }
            defaultValue={ options?.language || 'javascript' }
          />
          <Select
            placeholder="请选择主题"
            style={ { width: '100%' } }
            options={ themes }
            onSelect={ setTheme }
            defaultValue={ options?.theme || 'vs' }
          />
        </div>
      ) }
    </div>
  );
};
